<!--
 * @Descripttion:
 * @Author: zhangziyu
 * @Date: 2022-11-06 19:35:03
 * @LastEditors: zhangziyu
 * @LastEditTime: 2022-11-06 20:50:02
 * @Introduce:鼠标悬停展示对应详细数据
-->
<template>
  <div class="details-control">
    <div class="detailsMain">
      <div class="details-title">
        <h3>{{detailData.videoTitle}}</h3>
      </div>
      <div class="details-type">
        <div class="indexText3 rqzjText1" style="width:165px;margin-top:0;">{{detailData.classifyNames}}</div>
      </div>
      <div class="comprehensive-score">
        <label for="">综合评分：</label>
        <el-rate
          v-model="detailData.videoStars"
          disabled
          show-score
          text-color="#ff9900"
          :score-template="detailData.videoStars +'.0'">
        </el-rate>
      </div>
      <div class="brief-introduction">
         <p>课程简介：</p>
         <div class="rqzjExText1">{{detailData.videoContent}}</div>
      </div>
      <div class="view-details">
        <el-button type="text">查看详情</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    detailData: {
      type: Object,
      default: undefined
    }
  },
  computed: {
    numbers () {
      return 5 - this.detailData.score
    }
  }
}
</script>
<style lang="scss" src="../index.scss" scoped></style>

<style lang="scss" scoped>
  .details-control{
    position: relative;
    width: 280px;
    cursor: pointer;
    border: 1px solid #E4E7ED;
    height: 100%;
    padding: 10px;
  }
  .details-type{
    text-align: center;
    padding:4px 5px;
    background: #E4E9F1;
    display: inline-block;
    border-radius: 5px;
  }
  .comprehensive-score{
    margin-top: 15px;
    .score{
      display: inline-block;
      line-height: 0;
    }
    label{
      font-size: 14px;
      font-weight: bold;
    }
    img{
      width: 17px;
    }
    span{
      color: #f59a23;
      margin-left:5px
    }
  }
  .brief-introduction{
    p{
      font-size: 14px;
      font-weight: bold;
    }
    span{
      font-size: 13px;
      color: #979797;
    }
  }
  .view-details{
    position: absolute;
    bottom: 0;
    /deep/ .el-button--text{
      font-size: 14px;
      font-weight: bold;
      color: #00CC7E;
    }
  }
</style>
